﻿
@{
    ViewData["Title"] = "Note";
}
@section styles{

    <style>
        .flot-chart{
            height:300px;
        }
    </style>
}


<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">今天</span>
                    <h5>配送</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" id="Distribution">@*40 886,200*@</h1>
                    <div class="stat-percent font-bold text-success">
                        @*98%*@ <i class="fa fa-bolt"></i>
                    </div>
                    <small>配送数</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">今天</span>
                    <h5>回收</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" id="Recycling">@*275,800*@</h1>
                    <div class="stat-percent font-bold text-info">
                        @*20%*@ <i class="fa fa-level-up"></i>
                    </div>
                    <small>回收数</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">今天</span>
                    <h5>收款</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" id="Receipt">@*106,120*@</h1>
                    <div class="stat-percent font-bold text-navy">
                        @*44%*@ <i class="fa fa-level-up"></i>
                    </div>
                    <small>今日收款</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right">今天</span>
                    <h5>配送餐厅</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" id="Restaurant">@*80,600*@</h1>
                    <div class="stat-percent font-bold text-danger">
                        @*38%*@ <i class="fa fa-level-up"></i>
                    </div>
                    <small>已配送</small>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>订单</h5>
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-xs btn-white active" data-id="Month">天</button>
                            <button type="button" class="btn btn-xs btn-white" data-id="Year">月</button>
                            @*<button type="button" class="btn btn-xs btn-white">年</button>*@
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="ECharts"></div>
                            </div>
                        </div>
                        @*<div class="col-sm-3">
                            <ul class="stat-list">
                                <li>
                                    <h2 class="no-margins">2,346</h2>
                                    <small>订单总数</small>
                                    <div class="stat-percent">
                                        48% <i class="fa fa-level-up text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 48%;" class="progress-bar"></div>
                                    </div>
                                </li>
                                <li>
                                    <h2 class="no-margins ">4,422</h2>
                                    <small>最近一个月订单</small>
                                    <div class="stat-percent">
                                        60% <i class="fa fa-level-down text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 60%;" class="progress-bar"></div>
                                    </div>
                                </li>
                                <li>
                                    <h2 class="no-margins ">9,180</h2>
                                    <small>最近一个月销售额</small>
                                    <div class="stat-percent">
                                        22% <i class="fa fa-bolt text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 22%;" class="progress-bar"></div>
                                    </div>
                                </li>
                        </div>*@
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@section scripts{
    <script src="~/Scripts/ECharts/echarts.js"></script>
    <script type="text/javascript">

        var myChart = echarts.init(document.getElementById('ECharts'));

        // 指定图表的配置项和数据
        var option = {
            color: ['#003366', '#ff7800'],
            //title: {
            //    text: '营收趋势'
            //},
            tooltip: {
                confine: true,
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            grid: {
                right: '10%',
                containLabel: true,
            },
            series: []
        };

        $(document).ready(function () {
            $.getJSON("/DistributionReport/GetTodayStatisticsData").done(function (data) {
                if (data.success) {
                    $('#Distribution').html(data.result.distribution);
                    $('#Recycling').html(data.result.recovered);
                    $('#Receipt').html(data.result.receipt);
                    $('#Restaurant').html(data.result.restaurantCount);
                }
            })

            myChart.setOption(option);
            $.ajax({
                url: "/DistributionReport/DistributionAndRecyclingReportData?time=@DateTime.Now.ToString("yyyy-MM")&type=Month",
                method: "post",
                data: "json",
                success: function (result) {
                    myChart.setOption(result.result);

                }
            });
            $('.btn-group button').on('click',function () {
                $(this).siblings().removeClass('active');
                $(this).addClass('active');
                var type = $(this).data('id');
                      $.ajax({
                          url: "/DistributionReport/DistributionAndRecyclingReportData?time=@DateTime.Now.ToString("yyyy-MM")&type=" + type,
                          method: "post",
                          data: "json",
                          success: function (result) {
                            myChart.setOption(result.result);
                        }
                    });
            })

        })
    </script>
}
